import React from 'react';
import styles from './index.module.css';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { Swiper, Dialog } from 'antd-mobile';

export default function AcceptanceDetail() {
  const navigate = useNavigate();
  const { state } = useLocation();

  const items = state.imgUrl.map((item, index) => (
    <Swiper.Item key={index}>
      <div className={styles.contentImage}>
        <img
          src={item}
          style={{ width: '100%', height: '100%' }}
          onClick={() => {
            Dialog.alert({
              image: item,
              title: state.title,
              content: state.checkSelect[index],
            });
          }}
        alt=""/>
      </div>
    </Swiper.Item>
  ));

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.backButton}>
          <LeftOutlined onClick={() => navigate(-1)} />
        </div>
        <div className={styles.title}>检查详情</div>
        <div className={styles.emptySpace}></div>
      </div>

      <div className={styles.content}>
        <div className={styles.section}>
          <div className={styles.sectionTitle}>检查内容</div>
          <div className={styles.inspectionContent}>
            <div className={styles.subSection}>
              <div className={styles.subTitle}>所检查的商品</div>

              <div className={styles.productList}>
                {state.checkSelect.map((item, index) => {
                  return (
                    <div className={styles.productCategory} key={index}>
                      <div className={styles.categoryDot}></div>
                      <div className={styles.categoryTitle}>{item}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className={styles.subSection}>
              <div className={styles.subTitle}>内容描述</div>
              <div className={styles.descriptionBox}>{state.content}</div>
            </div>
          </div>
        </div>

        <div className={styles.section}>
          <div className={styles.sectionTitle}>检测报告</div>
          <div className={styles.reportImage}>
            <Swiper
              slideSize={70}
              trackOffset={15}
              loop
              stuckAtBoundary={false}
            >
              {items}
            </Swiper>
          </div>
        </div>
        <div className={styles.infoList}>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>供应商名称</span>
            <span className={styles.infoValue}>{state.supplier}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>供应商地址</span>
            <span className={styles.infoValue}>{state.address}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>检查人</span>
            <span className={styles.infoValue}>{state.checker}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>检查时间</span>
            <span className={styles.infoValue}>{state.checkTimer}</span>
          </div>
        </div>
      </div>
    </div>
  );
}
